<template>
  <!-- 内容区域 -->
  <!-- 顶部栏 -->
  <el-main>
    <div>
      <el-tabs class="tabHight" :tab-position="tabPosition" v-model="siteTabs">
        <el-tab-pane label="详情" name="first">
          <!-- from表单 -->
          <el-form
            ref="editform"
            :rules="rules"
            :model="areaEntiry"
            label-width="auto"
            size="mini"
            class="tabHight_auto"
          >
            <el-form-item label="Token:" prop="token">
              <el-input
                disabled
                v-model="areaEntiry.token"
                placeholder="请输入2-30字符标识符"
              ></el-input>
            </el-form-item>
            <el-form-item label="名称:" prop="name">
              <el-input
                v-model="areaEntiry.name"
                placeholder="请输入15字符以内名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="图像:" prop="imageUrl">
              <div class="img_upload">
                <app-upload
                  style="width: 100px; height: 100px"
                  tips=""
                  :is-resolution="true"
                  :width="100"
                  :height="100"
                  @subUploadSucceed="handleUploadSucceed"
                />
                <div class="imageHome" v-if="showImg">
                  <img
                    v-if="areaEntiry.imageUrl"
                    :src="areaEntiry.imageUrl | filtersFileUrl()"
                    class="image-size"
                  />
                </div>
              </div>
            </el-form-item>
            <el-form-item
              label="描述:"
              prop="description"
              placeholder="请输入描述"
            >
              <el-input
                type="textarea"
                v-model="areaEntiry.description"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!-- 涵盖tab -->
        <!-- <el-tab-pane label="含盖" name="second">
          <coverDatatab
            :editcoverData.sync="editcoverData"
            @sendselectedids="sendids"
          />
        </el-tab-pane> -->
        <!-- 元数据tab样式 -->
        <el-tab-pane label="元数据" name="third">
          <metaData
            :editmetaData="editmetaData"
            :isedit="isedit"
            @sendmetaDatas="sendmetaData"
          />
        </el-tab-pane>
      </el-tabs>
      <el-divider style="color: #000000"></el-divider>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible" size="mini">取 消</el-button>
        <el-button
          type="primary"
          @click="submitForm('editform')"
          size="mini"
          :loading="btnLoding"
          v-permission="[3, 'button']"
          key="editBtn"
          >确 定</el-button
        >
      </div>
    </div>
  </el-main>
</template>
<script>
import CoverDatatab from "./coverDatatab.vue";
import MetaData from "./metaData.vue";
import AppUpload from "../device/devicegroups/UploadImage.vue";
import "../../styles/uploadImg.sass";
import { putAreasToken } from "@/api/superlinkAreat";
import { TOKEN_RULES } from "@/utils/local";
import { addAreasToken } from "@/api/superlinkAreat.js";
export default {
  components: {
    CoverDatatab,
    MetaData,
    AppUpload,
  },
  data() {
    return {
      btnLoding: false,
      tabPosition: "left",
      isedit: true, //true为编辑页进入，false为添加页进入
      checked: true,
      checked1: true,
      dialogAdd: false,
      siteTabs: "first",
      ruleForm: {
        token: "",
        name: "",
        imageUrl: "",
        description: "",
      },
      coverData: [],
      editcoverData: [],
      metaData: [],
      formInline: { date: "", name: "" },
      rules: {
        token: TOKEN_RULES,
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 2, max: 15, message: "输入格式不正确", trigger: "blur" },
        ],
        imageUrl: [
          { required: true, message: "请填写图片链接", trigger: "blur" },
        ],
      },
      areaEntiry: {
        token: "",
        imageUrl: "",
        name: "",
        description: "",
      },
      areaToken: this.$route.query.areaToken,
      coverDataSelectedIds: [],
      metaDataJson: {},
      editmetaData: [],
      cloneToken: "",
    };
  },
  mounted() {
    this.areatypesByToken();
  },
  computed: {
    showImg: function () {
      return this.areaEntiry.imageUrl != "";
    },
  },
  methods: {
    // 图片上传
    handleUploadSucceed(url) {
      this.areaEntiry.imageUrl = url;
    },
    areatypesByToken() {
      var that = this;
      var param = { includeContainedAreaTypes: false };
      addAreasToken(param, this.areaToken).then((res) => {
        console.log("111 :>> ", 111);
        that.areaEntiry = Object.assign({}, res.data);
        that.editcoverData = that.areaEntiry.containedAreaTypeIds;
        that.editmetaData = that.areaEntiry.metadata;
        that.metaDataJson = that.areaEntiry.metadata;
        this.cloneToken = this.areaEntiry.token;
      });
    },
    //含盖页回传
    sendids(ids) {
      this.coverDataSelectedIds = ids;
    },
    //元数据页回传
    sendmetaData(md) {
      this.metaDataJson = md;
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let formData = {};
          formData = Object.assign({}, this.areaEntiry);
          formData.containedAreaTypeTokens = this.coverDataSelectedIds;
          formData.metadata = this.metaDataJson;
          this.btnLoding = true;
          putAreasToken(formData, this.areaToken)
            .then((res) => {
              this.$msg({
                type: "success",
                message: "操作成功!",
              });
              this.cloneToken = this.areaEntiry.token;
              this.$emit("submitedit", false, this.cloneToken);
            })
            .finally((f) => {
              this.btnLoding = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    dialogFormVisible() {
      this.$refs["editform"].resetFields();
      this.$emit("closeeditdialog", false);
    },
  },
};
</script>

<style scoped lang='scss'>
.img_upload {
  display: flex;
  .imageHome {
    margin-left: 14px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
    border-radius: 2px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.dialog-footer {
  float: right;
}
</style>>
